<!-- playground-fold -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sample</title>
</head>

<body style="background-color: var(--sapBackgroundColor); height: 350px">
    <!-- playground-fold-end -->

    <div class="group">
        <ui5-popover header-text="My people" class="peoplePopover" style="width: 400px" placement="Bottom">
            <div class="placeholder" style="display: flex; flex-wrap: wrap;"></div>
        </ui5-popover>

        <ui5-slider min="1" max="100" value="60"></ui5-slider>

        <ui5-avatar-group type="Group">
            <ui5-avatar size="M" icon="employee"></ui5-avatar>
            <ui5-avatar size="M" icon="employee"></ui5-avatar>
            <ui5-avatar size="M" initials="JD"></ui5-avatar>
            <ui5-avatar size="M">
                <img src="../assets/images/avatars/woman_avatar_5.png" alt="Woman Avatar 5" />
            </ui5-avatar>
            <ui5-avatar size="M">
                <img src="../assets/images/avatars/man_avatar_3.png" alt="Man Avatar 3" />
            </ui5-avatar>
            <ui5-avatar size="M" icon="employee"></ui5-avatar>
            <ui5-avatar size="M" icon="employee"></ui5-avatar>
            <ui5-avatar size="M" initials="JD"></ui5-avatar>
            <ui5-avatar size="M">
                <img src="../assets/images/avatars/woman_avatar_5.png" alt="Woman Avatar 5" />
            </ui5-avatar>
            <ui5-avatar size="M">
                <img src="../assets/images/avatars/man_avatar_3.png" alt="Man Avatar 3" />
            </ui5-avatar>
            <ui5-avatar size="M" icon="employee"></ui5-avatar>
            <ui5-avatar size="M" icon="employee"></ui5-avatar>
            <ui5-avatar size="M" initials="JD"></ui5-avatar>
            <ui5-avatar size="M">
                <img src="../assets/images/avatars/woman_avatar_5.png" alt="Woman Avatar 5" />
            </ui5-avatar>
            <ui5-avatar size="M">
                <img src="../assets/images/avatars/man_avatar_3.png" alt="Man Avatar 3" />
            </ui5-avatar>
        </ui5-avatar-group>
    </div>
    <!-- playground-fold -->
    <script type="module" src="main.js"></script>
</body>

</html>
<!-- playground-fold-end -->
